<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <p id="p1">123</p>
        <button @click="change">改变</button>
        <input type="text" v-model="msg">
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 123,
                }
            },
            methods: {
                change(){
                    this.msg++;
                }
            },
            computed: {
            },
            watch: {
            },
            // template:'',
            beforeCreate() {
                console.log('-----beforeCreate-----')
                console.log(this.msg)
                // console.log(this.$options.data().msg)
                // this.$nextTick(()=>{
                //     this.msg='abc'
                // })
            },
            created() {
                console.log('-----created-----')
                console.log(this.msg)
            },
            beforeMount() {
                console.log('-----beforeMount-----')
            },
            mounted() {
                console.log('-----mounted-----')
                
            },
            beforeUpdate() {
                console.log('-----beforeUpdate-----')
                // debugger
            },
            updated() {
                // this.msg++
                console.log('-----updated-----')
                // debugger
            },
            beforeUnmount() {
                console.log('-----beforeUnmount-----')
                debugger
            },
            unmounted() {
                console.log('-----unmounted-----')
            },
        })
        const vm=app.mount("#app");
    </script>
</body>

</html>